<template>
  <div style>
    <!-- 一般信息变更页面 -->
    <div v-if="commodify" style="width: 90%;margin: 0px auto;margin-top:40px;">
      <a-spin :spinning="spinning">
        <p style="color:#3a3a3a;text-align: center">以下变更无需审核，修改后即时生效</p>

        <a-card class="card_sty" title="经营信息" :headStyle="headStyle">
          <a-card-grid style="width:25%;textAlign:'center'">经营地址</a-card-grid>
          <a-card-grid style="width:75%;textAlign:'center'">
            {{agentInfoDTO.realProvinceName}}
            -{{agentInfoDTO.realCityName}}-{{agentInfoDTO.realDistrictName}}-{{agentInfoDTO.realAddress}}
          </a-card-grid>
        </a-card>

        <div style="text-align:center;margin:20px 0;">
          <a-button type="primary" @click="comModify" :loading="iconLoading">一般信息变更</a-button>
        </div>
      </a-spin>
    </div>
    <div v-if="!commodify" style="width: 90%;margin: 0px auto;margin-top:40px;">
      <p style="color:#3a3a3a;">以下变更无需审核，修改后即时生效</p>
      <a-form @submit="handleSubmit" style="margin-top: 8px;" :form="form">
        <div style="width:80%;">
          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:10 }" class="formGroupTitle">基本信息</a-col>
          </a-row>
          <a-form-item v-bind="formItemLayout" label="经营地址">
            <a-cascader
              class="w-sty"
              v-decorator="[
                      'Address',
                      {rules: [{ required: true, message: '经营地址' }]}
                    ]"
              :options="options2"
              @change="onChange"
              placeholder="请选择经营地址"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" help="此地址将作为之后协议/资料寄送的默认地址，请准确填写" label="详细地址">
            <a-textarea
              class="width-sty"
              v-decorator="[
                      'realAddress',
                      {rules: [{ required: true, message: '请输入实际经营详细地址' }]}
                    ]"
              placeholder="请输入实际经营详细地址"
              :rows="2"
            />
          </a-form-item>
        </div>
        <div style="text-align:center;margin:20px 0;">
          <a-button type="primary" style="width:6vw;" htmlType="submit" :loading="iconLoading">保存</a-button>
          <a-button type="primary" style="width:6vw;margin-left: 1vw;" @click="gologin">取消</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";

import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";

import DetailList from "../../../components/tool/DetailList";

import pick from "lodash.pick";
import api from "@/common/api";
import { get, post } from "@/common/api";
import moment from "moment";
import { type } from "os";
const dateFormat = "YYYY-MM-DD";

const ATabPane = ATabs.TabPane;
const DetailListItem = DetailList.Item;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
    DetailListItem,
    DetailList
  },
  data() {
    return {
      docking: true,
      iscategory: true,
      spinning: false,
      query: {},
      information: { controlIdentity: {}, merchant: { orgProductTypes: [] } },
      legal: {},
      bank: {},
      agentInfoDTO: {},
      auth: {},
      customerOrg: {},
      iconLoading: false,
      commodify: true,
      type: null,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      isMerchant: false,
      options2: [],
      options: [],
      address: [],
      headStyle: {
        height: "45px",
        display: "flex"
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12 }
        }
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12 }
        }
      },
      formItemLayout3: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 12 }
        }
      },
      areaoptions: [
        { text: "200平米以上", value: "place_area_001" },
        { text: "100-200平米(含)", value: "place_area_002" },
        { text: "50-100平米(含)", value: "place_area_003" },
        { text: "50平米以下(含)", value: "place_area_004" }
      ],
      numoptions: [
        { text: "500人以上", value: "org_employees_001" },
        { text: "100-500人(含)", value: "org_employees_002" },
        { text: "50-100人(含)", value: "org_employees_003" },
        { text: "10-50人(含)", value: "org_employees_004" },
        { text: "0-10人(含)", value: "org_employees_005" }
      ]
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.getareaData();
    this.init();
  },
  methods: {
    moment,
    init: function() {
      //查询记录
      this.$axios.get("/agent/account/manage/information/general").then(res => {
        console.log("general", res);
        if (res.data.code == "OK") {
          this.spinning = false;
          this.agentInfoDTO = res.data.data.agentInfoDTO;

          this.legal = res.data.data.agentInfoDTO.identityDTO; //法定代表人
          this.bank = res.data.data.agentInfoDTO.bankCardDTO; //银行卡账户信息

          //基本信息
        } else {
          this.$message.warning(res.data.message);
          this.spinning = false;
        }
      });
    },
    handleSubmit(e) {
      //提交修改信息
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("ssss");
          this.iconLoading = true;
          this.$axios
            .post("/agent/account/manage/general/update", {
              merchantType: this.agentInfoDTO.merchantType,
              realProvince: this.information.realProvince,
              realCity: this.information.realCity,
              realDistrict: this.information.realDistrict,
              realAddress: values.realAddress,
              realProvinceName: this.information.realProvinceName,
              realCityName: this.information.realCityName,
              realDistrictName: this.information.realDistrictName
            })
            .then(
              res => {
                console.log("提交更改", res);
                if (res.data.code == "OK") {
                  this.iconLoading = false;
                  this.init();
                  this.commodify = true;
                } else {
                  this.$message.warning(res.data.message);
                  this.iconLoading = false;
                }
              },
              err => {
                this.iconLoading = false;
              }
            );
        }
      });
    },
    onChange(value, selectedOptions) {
      // console.log("changevalue", typeof value, value);
      this.text = value;
      // this.text = selectedOptions.map(o => o.label);
      if (selectedOptions.length == 1) {
      } else if (selectedOptions.length == 2) {
      } else if (selectedOptions.length == 3) {
        (this.information.realCityName = selectedOptions[1].label),
          (this.information.realCity = selectedOptions[1].value);
        (this.information.realProvinceName = selectedOptions[0].label),
          (this.information.realProvince = selectedOptions[0].value);
        (this.information.realDistrictName = selectedOptions[2].label),
          (this.information.realDistrict = selectedOptions[2].value);
      } else {
        console.log(selectedOptions);
      }
      console.log(this.information);
    },
    onChange2(e) {
      // console.log("radio checked", e.target.value);
      this.information.placeRight = e.target.value;
    },

    reset() {},
    conexport() {},
    callback() {},
    getareaData() {
      this.$axios.get("/agent/division/all").then(res => {
        // console.log("地址", res);
        const result = res.data;
        if (res.data.list) {
          let list = result.list;
          let arr = [];
          let newArr = list.map((item, index, list) => {
            let test = {
              label: item.label,
              value: item.value,
              children: []
            };
            arr.push(test);
            if (item.children) {
              let children = [];
              for (let i = 0; i < item.children.length; i++) {
                let test2 = {
                  label: item.children[i].label,
                  value: item.children[i].value,
                  children: []
                };
                children.push(test2);

                if (item.children[i].children) {
                  let child2 = [];
                  for (let a = 0; a < item.children[i].children.length; a++) {
                    let test3 = {
                      label: item.children[i].children[a].label,
                      value: item.children[i].children[a].value
                    };
                    child2.push(test3);
                  }
                  children[i].children = child2;
                }
              }
              arr[index]["children"] = children;
            }
            return arr;
          });
          // console.log("newArr", newArr);
          this.options = newArr[0];
          this.options2 = newArr[0];
        } else {
          console.log("res", res);
        }
      });
    },
    handleSearch() {},
    handleChange(value) {
      console.log(value);
    },
    dateChange2(date, dateString) {
      // console.log("dateString2", dateString);
      this.information.controlIdentity.expiryDate = dateString; //证件有效期
    },
    validateIdentityNo(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
        console.log("身份证号码！", value);
      }
      callback();
    },
    handleOk() {
      this.$router.push("/home");
    },
    gologin() {
      //  this.$router.push("/org/accountmanage/myinfo");
      location.reload();
      this.commodify = true;
    },
    comModify() {
      //修改查询
      this.iconLoading = true;

      this.commodify = false;
      this.iconLoading = false;

      // this.agentInfoDTO = res.data.data.merchantPospDTO;

      (this.information.realProvince = this.agentInfoDTO.realProvince),
        (this.information.realCity = this.agentInfoDTO.realCity),
        (this.information.realDistrict = this.agentInfoDTO.realDistrict),
        (this.information.realProvinceName = this.agentInfoDTO.realProvinceName),
        (this.information.realCityName = this.agentInfoDTO.realCityName),
        (this.information.realDistrictName = this.agentInfoDTO.realDistrictName),
        this.$nextTick(() => {
          //实际经营地址
          this.form.setFieldsValue({
            Address: [
              this.agentInfoDTO.realProvince,
              this.agentInfoDTO.realCity,
              this.agentInfoDTO.realDistrict
            ],
            realAddress: this.agentInfoDTO.realAddress //详细地址
          });
        });
    },
    validatemail(rule, value, callback) {
      const reg = new RegExp(
        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      );
      if (value && !reg.test(value)) {
        callback("您输入的邮箱格式有误！");
        return;
      } else {
        this.emailvalue = value;
        console.log(this.emailvalue);
        callback();
      }
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        /* eslint-disable-next-line */
        this.phone = false;
        callback("您输入手机号格式有误！");
        return;
      } else {
        if (!value) {
          this.phone = false;
        } else {
          this.phone = true;
          this.phonevalue = value;
          console.log(this.phonevalue);
        }
        callback();
      }
    },
    tomaininfo() {
      this.$router.push("/org/infoset/maininfochange");
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

// .ant-input {
//   width: 50%;
// }
span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px;
  margin-top: 20px;
  text-align: right;
}

// .formGroupTitle {
//   font-size: 20px;
//   font-weight: bold;

// }
.ant-tabs-nav {
  float: right;
}

.content4 {
  display: flex;
  margin-bottom: 20px;

  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }

  .conright {
    padding: 0 20px;

    span {
      margin-right: 20px;
    }
  }
}

.row-sty {
  margin-bottom: 20px;
}

.width-sty {
  width: 50%;
}

.w-sty {
  width: 60%;
}

.span-sty {
  display: block;
  text-align: center;
  padding-right: 8px;
  color: #999;
}

.p-sty {
  color: #999;
  padding-left: 30px;
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.card_sty {
  margin-bottom: 30px;
}
.inputWidth {
  width: 50%;
}
</style>